import React from 'react';
import { Form, Row, Col, Input, InputNumber, Button, message } from 'antd';
import { FormProps } from '@/types/global';
import { CqDocInfoFormValue } from '@/types/workbench';
import { formLayout, basicFormItemLangLayout } from '@/utils/commons';

type CqDocInfoFormProps<T> = FormProps<T> & {
}

const FormItem = Form.Item;
/**
 * 录入需求文档信息
 */
const CqDocInfoForm = (props: CqDocInfoFormProps<CqDocInfoFormValue>) => {

  const [form] = Form.useForm<CqDocInfoFormValue>();

  const workloadChange = (value: number | string | null) => {
    if (value) {
      const valueStr = value + '';
      if (valueStr.indexOf('.') >= 0) {
        message.warning('需求工作量只能为正整数');
      }
    }
  }

  /**
   * 表单提交
   */
  const handleSubmit = () => {
    // 收集表单数据
    // 传递回父组件
    const fieldsValue = form.getFieldsValue();
    console.info(fieldsValue);
    const values = {
      ...fieldsValue
    };
    console.log('Received values of form: ', values);
    const { onSubmit } = props;
    if (onSubmit) {
      onSubmit({
        ...values
      });
    }
  }

  const handleQuit = () => {
    // 先清除form表单
    form.resetFields();
    const { onCancel } = props;
    if (onCancel) {
      onCancel();
    }
  }

  const { colon, loading } = props;
  // 8-16布局
  // 8-16布局
  const formItemLangLayout = basicFormItemLangLayout;

  return(
    <React.Fragment>
      <Form
        layout={formLayout}
        form={form}
        onFinish={handleSubmit}
      >
        <Row>
          <Col span={12}>
            <FormItem label='需求文件路径' name='srdPath' {...formItemLangLayout} colon={colon}
              rules={[
                { required: true, message: '需求文件路径必输' }
              ]}
            >
              <Input />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='概设文件路径' name='odsPath' {...formItemLangLayout} colon={colon}
              rules={[
                { required: true, message: '概设文件路径必输' }
              ]}
            >
              <Input />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='详设文件路径' name='ddsPath' {...formItemLangLayout} colon={colon}
              rules={[
                { required: true, message: '详设文件路径必输' }
              ]}
            >
              <Input />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='接口分析结果路径' name='oarPath' {...formItemLangLayout} colon={colon}>
              <Input placeholder='当需求涉及接口变动时必填'/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='数据库设计文档路径' name='dbdPath' {...formItemLangLayout} colon={colon}>
              <Input placeholder='当需求涉及数据库变动时必填'/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='需求工作量' name='workload' {...formItemLangLayout} colon={colon}
              rules={[
                { required: true, message: '需求工作量必输' },
              ]}
            >
              <InputNumber
                min={3}
                precision={0}
                onChange={workloadChange}
                style={{ width: '100%' }}
                addonAfter='人天'
              />
            </FormItem>
          </Col>
        </Row>
        <Row justify='center'>
          <Col>
            <FormItem>
              <Button type='primary' loading={loading} htmlType='submit'>
                提交
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={handleQuit}>返回</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </React.Fragment>
  );
}

export default CqDocInfoForm;